<template>
    <div class="repayment">
        <div class="panel" v-for="(item, index) in prepayment">
            <div class="panel-header" v-if="item.payPrincipalAmt == item.actualPayprincipalAmt" style="background-color: #00dfb9">
                第{{item.period}}期
            </div>
            <div class="panel-header" v-else>
                第{{item.period}}期
            </div>
            <div class="panel-body">
                <ul>
                    <li>
                        应还金额：<span>{{item.payPrincipalAmt}}</span>
                    </li>
                    <li>
                        实还金额：<span>{{item.actualPayprincipalAmt}}</span>
                    </li>
                    <li>
                        还款日期：<span>{{item.paydate}}</span>
                    </li>
                    <li>
                        还款账号：<span>{{item.replaceAccount}}</span>
                    </li>
                    <li>
                        逾期天数：<span>{{item.overDueDays}}</span>
                    </li>
                    <li>
                        逾期金额：<span>{{item.lateFee}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState} from "vuex"
    export default {
        name: 'orderPrepayment',
        data: function () {
            return {
                contract_no: this.$route.params.contract_no,
                prepayment:[]
            }
        },
        created() {
            let self=this;
            self.$store.dispatch({
                type: 'orderPrepayment',
                params: {
                    contract_no: this.contract_no
                }
            }).then(res=>{
                self.prepayment=res
            });
        }
    }
</script>
<style>
</style>